<template>
  <view>
    
    <view class="Box">
      <view class="bb" v-for="(item,index) in goodslist" :key="index" @click="tocateDetail(item)">
        
        <view class="ImgBox">
          <image :src="item.goods_small_logo || defaultImg" mode="widthFix"></image>
        </view>
      
        <view class="TexBox">
          <text class="t1">{{item.goods_name}}</text>
          <text class="t2">{{item.goods_price|filterRmb}}</text>
        </view>
      
      </view>
    </view>
    
    
  </view>
</template>

<script>
  export default {
    data() {
      return {
        queryObj:{//请求接口的参数
          query:"",
          cid:"",
          pagenum:1,
          pagesize:10
        },
        goodslist:[],
        total:0,//总条数
        defaultImg:"https://img3.doubanio.com/f/movie/8dd0c794499fe925ae2ae89ee30cd225750457b4/pics/movie/celebrity-default-medium.png",
        isloading:false,//节流阀
      };
    },
    onLoad(options) {
      this.queryObj.query = options.query||""
      this.queryObj.cid = options.cid||""
      this.getgoodslist()
      
    },
    methods:{
      async getgoodslist(cb){
        this.isloading = true
        const {data:res} = await uni.$http.get("/api/public/v1/goods/search",this.queryObj)
        this.isloading = false
        
        cb && cb()//检查cb存不存在，如果cb存在就执行cb()方法
        
        if(res.meta.status!=200) return uni.showMsg('数据非200')
        this.goodslist = [...this.goodslist,...res.message.goods]//数据拼接
        this.total = res.message.total
        if(this.goodslist.length==0) return uni.showMsg("不好意思，找不到此页面数据(ಥ_ಥ)")
      },
      tocateDetail(item){
        uni.navigateTo({
          url: '/subpkg/goods_detail/goods_detail?goods_id='+item.goods_id
        });
      }
    },
    filters:{
      filterRmb(val){
        return "￥" + (val).toFixed(2);//价格进行过滤，取价格的余数后两位
      }
    },
    
    /*下拉刷新*/
    onPullDownRefresh() {
      setTimeout(()=>{
        this.queryObj.pagenum = 1
        this.total = 0
        this.isloading = false
        this.goodslist = []
        
        this.getgoodslist(()=>uni.stopPullDownRefresh())
      },2000)      
    },
    
    /*上拉刷新*/
    onReachBottom() {
      // 判断是否还有下一页数据
      if (this.queryObj.pagenum * this.queryObj.pagesize >= this.total) return uni.showMsg('数据加载完毕')
        
      // 判断是否正在请求其它数据，如果是，则不发起额外的请求
      if(this.isloading) return
      
      this.queryObj.pagenum += 1
      this.getgoodslist()
    }
  }
</script>

<style lang="scss">
.Box{
  .bb{
    display: flex;
    // margin: 10px 0px;
    border-bottom: 1px solid #e8e8e8;
    padding: 10px 0px;
    .ImgBox{
      margin-right: 10px;
      image{
        width:150px;
      }
    }
    .TexBox{
      display: flex;
      flex-direction:column;
      flex-wrap: wrap;
      position: relative;
      .t1{font-size: 15px;}
      .t2{
        position: absolute;
        top: 130px;
        color: #8d2a38;
      }
    }
  }
}
</style>
